<template>
  <div
    class="fixed top-0 right-0 h-full w-80 bg-white shadow-lg border-l border-gray-200 z-20 overflow-y-auto"
  >
    <div class="p-4">
      <!-- 头部 -->
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-bold text-gray-800">变量管理</h2>
        <button
          @click="$emit('close')"
          class="text-gray-500 hover:text-gray-700"
        >
          ✕
        </button>
      </div>

      <!-- 添加变量 -->
      <div class="mb-6 p-4 bg-gray-50 rounded-lg">
        <h3 class="font-semibold mb-3">添加新变量</h3>
        <div class="space-y-3">
          <input
            v-model="newVariable.name"
            placeholder="变量名称"
            class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <select
            v-model="newVariable.type"
            class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="string">文本 (string)</option>
            <option value="number">数值 (number)</option>
            <option value="boolean">布尔 (boolean)</option>
            <option value="object">对象 (object)</option>
          </select>
          <input
            v-model="newVariable.defaultValue"
            placeholder="默认值"
            class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <textarea
            v-model="newVariable.description"
            placeholder="描述"
            rows="2"
            class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          ></textarea>
          <button
            @click="addVariable"
            class="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
          >
            添加变量
          </button>
        </div>
      </div>

      <!-- 变量列表 -->
      <div>
        <h3 class="font-semibold mb-3">现有变量</h3>
        <div
          v-if="variables.length === 0"
          class="text-gray-500 text-center py-4"
        >
          暂无变量
        </div>
        <div v-else class="space-y-3">
          <div
            v-for="variable in variables"
            :key="variable.id"
            class="p-3 border border-gray-200 rounded-lg"
          >
            <div class="flex items-center justify-between mb-2">
              <span class="font-medium">{{ variable.name }}</span>
              <div class="flex gap-2">
                <button
                  @click="editVariable(variable)"
                  class="text-blue-500 hover:text-blue-700 text-sm"
                >
                  编辑
                </button>
                <button
                  @click="deleteVariable(variable.id)"
                  class="text-red-500 hover:text-red-700 text-sm"
                >
                  删除
                </button>
              </div>
            </div>
            <div class="text-sm text-gray-600">
              <div>类型: {{ variable.type }}</div>
              <div>默认值: {{ variable.defaultValue }}</div>
              <div v-if="variable.description">
                描述: {{ variable.description }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

interface WorkflowVariable {
  id: string;
  name: string;
  type: string;
  defaultValue: any;
  description: string;
}

interface Props {
  variables: WorkflowVariable[];
}

interface Emits {
  (e: "update:variables", variables: WorkflowVariable[]): void;
  (e: "close"): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const newVariable = reactive({
  name: "",
  type: "string",
  defaultValue: "",
  description: "",
});

let variableIdCounter = 1;

const addVariable = () => {
  if (!newVariable.name.trim()) {
    alert("请输入变量名称");
    return;
  }

  const variable: WorkflowVariable = {
    id: `var_${variableIdCounter++}`,
    name: newVariable.name,
    type: newVariable.type,
    defaultValue: newVariable.defaultValue,
    description: newVariable.description,
  };

  const updatedVariables = [...props.variables, variable];
  emit("update:variables", updatedVariables);

  // 重置表单
  newVariable.name = "";
  newVariable.type = "string";
  newVariable.defaultValue = "";
  newVariable.description = "";
};

const editVariable = (variable: WorkflowVariable) => {
  // 简单的编辑实现
  const newName = prompt("编辑变量名称:", variable.name);
  if (newName && newName.trim()) {
    const updatedVariables = props.variables.map((v) =>
      v.id === variable.id ? { ...v, name: newName.trim() } : v
    );
    emit("update:variables", updatedVariables);
  }
};

const deleteVariable = (id: string) => {
  if (confirm("确定要删除这个变量吗？")) {
    const updatedVariables = props.variables.filter((v) => v.id !== id);
    emit("update:variables", updatedVariables);
  }
};
</script>
